<template>
  <div class="module-content">
    <div class="module-header">
      <div class="module-title">数据源</div>
      <el-button type="primary" size="normal">
        <i class="el-icon-plus"></i>
        添加数据源</el-button
      >
    </div>
    <el-table
      :header-cell-style="{ backgroundColor: '#F5F7FA', border: '0px' }"
      :data="dataSourceList"
    >
      <el-table-column
        v-for="h in dataSourceHeaders"
        :key="h.index.toString()"
        :prop="h.fieldName"
        :label="h.text"
        :width="h.width ? h.width : ''"
      ></el-table-column>
      <el-table-column class-name="method-col" label="操作" width="180px"
        ><template
          ><el-link type="primary">查看详情</el-link>
          <el-link type="primary" @click="onDelete">删除</el-link>
        </template>
      </el-table-column>
      <template slot="empty">
        <div class="empty-toolbar">
          暂无数据，你可以 <el-link type="primary"> 添加数据源</el-link>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import dataSourceObj from '@/utils/DataViewController.js'
import '@/assets/main-frame.css'
// console.log(dataSourceObj.getDataSourceType())
// console.log(dataSourceObj.getDataSourceType().getData())
export default {
  data() {
    return {
      dataSourceList: dataSourceObj.getDataSourceList().getData(),
      dataSourceHeaders: [
        {
          index: 0,
          text: '#',
          fieldName: 'index',
          width: '80px'
        },
        {
          index: 1,
          text: 'ID',
          fieldName: 'sourceId'
        },
        {
          index: 2,
          text: '数据源类型',
          fieldName: 'sourceType'
        },
        {
          index: 3,
          text: '数据源类型',
          fieldName: 'sourceType'
        },
        {
          index: 4,
          text: '添加时间',
          fieldName: 'sourceCreatedTime'
        }
      ]
    }
  },
  methods: {
    onDelete() {
      this.$confirm('将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  computed: {}
}
</script>

<style>
.el-table__empty-block {
  border-bottom: 1px solid #eee;
}
.el-link {
  margin-left: 5px;
}
.empty-toolbar {
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
</style>
